<template>
  <div>
    <!--  <h1>册内目录</h1> -->
    <div class="container">
      <span class="Seat">{{ now_location }}</span>
      <div class="container-right">
        <div class="top">
          <div class="top-right">
            <el-form :model="ruleForm" class="demo-form-inline" ref="ruleForm">
              <el-form-item label="互见号：">
                <el-input v-model="ruleForm.Reciprocal"></el-input>
              </el-form-item>
              <el-form-item label="档案密级：">
                <el-input v-model="ruleForm.FileSecurity"></el-input>
              </el-form-item>
              <el-form-item label="照片张数">
                <el-input v-model="ruleForm.page_num"></el-input>
              </el-form-item>
              <el-form-item label="拍摄起止日期:">
                <el-input v-model="ruleForm.start_end_date"></el-input>
              </el-form-item>
              <el-form-item label="保管期限：">
                <el-select clearable v-model="ruleForm.store_period">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <!-- <el-input v-model="ruleForm.store_period"></el-input> -->
              </el-form-item>
              <el-form-item label="档案号:">
                <input type="text" v-model="ruleForm.archives_no" />
              </el-form-item>
              <el-form-item
                class="TextArea"
                label="备考表说明:"
                :label-width="formLabelWidth"
              >
                <el-input
                  type="textarea"
                  v-model="ruleForm.append_remark"
                ></el-input>
              </el-form-item>
              <el-form-item
                class="TextAreas"
                label="照片档案题名:"
                :label-width="formLabelWidth"
              >
                <el-input type="textarea" v-model="ruleForm.title"></el-input>
              </el-form-item>
              <el-form-item
                class="TextArea"
                label="备注:"
                :label-width="formLabelWidth"
              >
                <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
              </el-form-item>

              <div class="top-left">
                <el-button
                  @click="clickOne(1)"
                  size="mini"
                  v-show="xsyc === '1' ? true : false"
                  >首卷</el-button
                >
                <el-button
                  @click="clickTwo(2)"
                  size="mini"
                  v-show="xsyc === '1' ? true : false"
                  >上一卷</el-button
                >
                <el-button
                  @click="clickThree(3)"
                  size="mini"
                  v-show="xsyc === '1' ? true : false"
                  >下一卷</el-button
                >
                <el-button
                  @click="clickFour(4)"
                  size="mini"
                  v-show="xsyc === '1' ? true : false"
                  >尾卷</el-button
                >
              </div></el-form
            >
          </div>
        </div>
        <el-form :inline="true">
          <div class="commontop">
            <div class="commontop-left">
              <el-input
                placeholder="项目名称、ID"
                v-model="froms.keyword"
                clearable
                prefix-icon="el-icon-search"
              ></el-input>
              <el-button class="searchbgc" icon="iconfont icon-sousuo2"
                >搜索</el-button
              >

              <el-button
                @click="addClick('addForm')"
                icon="iconfont icon-xinzenganjuanmulu"
                >新增册内目录</el-button
              >
              <el-button icon="iconfont icon-daorujuanneimulu"
                >导入册内目录</el-button
              >
              <el-button icon="iconfont icon-daochujuanneimulu"
                >导出册内目录</el-button
              >
              <el-button
                icon="iconfont icon-piliangdaorupdf"
                v-show="xsyc === '1' ? true : false"
                >批量导入照片</el-button
              >
              <el-button type="primary">检查数据</el-button>
              <el-button type="primary" @click="ProblemMark"
                >问题标记</el-button
              >
              <el-button type="primary">文字替换</el-button>
              <el-button type="primary" @click="goBack">返回案卷</el-button>
            </div>
            <div class="commontop-right">
              <el-button
                v-show="xsyc === '1' ? true : false"
                class="red"
                icon="iconfont icon-shanchu1"
                >删除</el-button
              >
            </div>
          </div>
        </el-form>

        <el-table
          v-loading="isLoading"
          class="table"
          :data="tableData"
          border
          max-height="600"
          @row-click="Rowclick"
          @cell-click="tabClick"
          @selection-change="handleSelectionChange"
          :row-class-name="tableRowClassName"
          :cell-class-name="tableCellClassName"
          :header-cell-style="{
            backgroundColor: '#3963fd',
            color: '#fff',
            'text-align': 'center',
          }"
          style="width: 100%; margin-top: 20px"
        >
          <template slot="empty">
            <img
              src="@/assets/imgs/暂未数据.png"
              alt
              style="margin-top: 104px"
            />
            <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
          </template>
          <el-table-column type="selection" width="50"></el-table-column>
          <!--  <el-table-column type="index + 1" width="65" label="序号">
            <template slot-scope="scope">
              <a>{{ scope.row.index + 1 }} </a>
            </template>
          </el-table-column> -->
          <el-table-column
            width="220"
            align="center"
            prop="serial_no"
            label="照片号"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  class="InputTits"
                  ref="editInput"
                  type="textarea"
                  v-model="scope.row.serial_no"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                />
              </div>
              <div v-else>{{ scope.row.serial_no }}</div>
              <el-tooltip
                :content="scope.row.problem"
                v-show="scope.row.problem != ''"
                placement="top"
              >
                <i
                  class="el-icon-warning icons"
                  style="color: red"
                  @click="Problemsolving(scope.row)"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column align="left" prop="title" label="题名">
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  type="textarea"
                  class="InputTit"
                  ref="editInput"
                  v-model="scope.row.title"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                />
              </div>
              <div v-else>{{ scope.row.title }}</div>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            align="center"
            prop="photo_date"
            label="拍摄时间"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  type="textarea"
                  ref="editInput"
                  v-model="scope.row.photo_date"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                />
              </div>
              <div v-else>{{ scope.row.photo_date }}</div>
            </template>
          </el-table-column>

          <el-table-column
            width="80"
            align="center"
            prop="page_num"
            label="页号"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  ref="editInput"
                  type="textarea"
                  v-model="scope.row.page_num"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                />
              </div>
              <div v-else>{{ scope.row.page_num }}</div>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            align="center"
            prop="remark"
            label="备注"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.index === clickRow &&
                  scope.column.index === clickCell
                "
              >
                <el-input
                  ref="editInput"
                  type="textarea"
                  v-model="scope.row.remark"
                  maxlength="300"
                  size="mini"
                  @blur="inputBlur"
                />
              </div>
              <div v-else>{{ scope.row.remark }}</div>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="120px">
            <!-- v-if="scope.row.value1 == true ? true : false"  -->
            <template slot-scope="scope">
              <el-tooltip
                content="查看"
                v-if="scope.row.file_url != null"
                placement="top"
              >
                <el-button class="green" size="mini"
                  ><a target="__blank" :href="scope.row.file_url"
                    ><i class="iconfont icon-piliangdaorupdf"></i></a
                ></el-button>
              </el-tooltip>

              <el-tooltip
                content="点击上传"
                v-else-if="scope.row.file_url == null"
                placement="top"
              >
                <el-button
                  icon="iconfont icon-piliangdaorupdf"
                  class="red"
                  size="mini"
                ></el-button>
              </el-tooltip>
              <el-button size="mini" class="red"
                ><i class="el-icon-delete"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="问题标记" :visible.sync="dialogVisible" width="25%">
      <el-autocomplete
        class="inline-input"
        v-model="problemFrom.problem"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        @select="handleSelect"
      ></el-autocomplete>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- <el-dialog
      :visible.sync="centerDialogVisible"
      width="70%"
      height="700px"
      center
    >
      <div class="Sync">
        <div class="leftSync">
          <el-tree
            :data="datas"
            class="filter-tree"
            :props="defaultProps"
            node-key="id"
            :highlight-current="true"
            @node-click="handleNodeClick2"
          >
            <span class="span-ellipsis" slot-scope="{ node, data }">
              <el-tooltip
                class="item"
                effect="light"
                :content="node.label || ''"
                placement="top-start"
              >
                <span>{{ node.label }}</span>
              </el-tooltip>
            </span>
          </el-tree>
        </div>
        <div class="rightSync">
          <i class="el-icon-arrow-left" @click="GoLeft(1)"></i>
          <iframe
            :src="pageUrl"
            frameborder="0"
            style="width: 100%; height: 600px"
          ></iframe>
          <i class="el-icon-arrow-right" @click="GoLeft(2)"></i>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { photoCatalogs, AddphotoCatalogs } from "@/api/home/index";
import CommonDawer from "../../../../../components/common/commonTab.vue";

export default {
  components: {
    CommonDawer,
  },
  data() {
    return {
      /* 树状图数据 */
      datas: [],
      /* 树状图子集和标题 */
      defaultProps: {
        children: "children",
        label: "title",
      },
      /* 树状图修改 */
      filterText: "",

      //按钮显示隐藏
      xsyc: "1",

      /* 显示当前位置 */
      now_location: "",

      //右边表格搜索
      froms: {
        book_title_id: "",
        keyword: "",
      },

      clickRow: null, // 当前点击的行
      clickCell: null, // 当前点击的列
      tabClickLabel: "", // 当前点击的列名
      /* 表格数据 */
      tableData: [],
      /* 获取表格数据 */
      pages: {
        book_title_id: "",
      },
      //加载页面
      isLoading: false,
      //新增册内目录表单数据
      addForm: {
        photo_archives_id: "",
        title: "监理部组织第一次工地部长佟明华主持召开会议",
        serial_no: "001",
        negative_no: "",
        see_no: "",
        page_num: 1,
        word_desc: "",
        remark: "",
        file_url: "",
        photo_date: "",
        photo_user: "刘恒",
      },
      /* 表单宽度 */
      formLabelWidth: "110px",
      //卷内导出传递的值
      iDS: {
        per_page: "",
        photo_archives_id: this.$route.query.id,
        keyword: "",
      },
      /* 头部的表单 */
      ruleForm: {},
      /* 使用期限选择 */
      options: [
        { id: 1, title: "永久" },
        { id: 2, title: "10年" },
        { id: 3, title: "3年" },
      ],
      //显示PDF蒙尘
      centerDialogVisible: false,
      pageUrl: "", // pdf地址
      //表格编辑
      editForm: {},
      //提交错误的框的蒙尘
      dialogVisible: false,
      /* 输入建议框的建议数组 */
      restaurants: [],
      /* 提交错误的输入框的绑定值 */
      problemFrom: {
        ids: "",
        problem: "",
        project_classify_id: sessionStorage.getItem("clickTd"),
        part_company_id: this.$route.query.companyId,
      },

      /*  查看pdf判断上一个或者下一个提供的数据*/
      Pdflist: {
        type: "",
        book_catalog_id: "",
      },
    };
  },
  watch: {
    /* 树状图监听搜索 */
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    /* 树状图点击触发 */
    handleNodeClick2(data) {
      console.log(data);
    },

    /* 跳转到第一卷 */
    clickOne(item) {},
    /* 跳转到上一卷 */
    clickTwo(item) {},
    /* 跳转到下一卷 */
    clickThree(item) {},
    /* 跳转到最后一卷 */
    clickFour(item) {},

    /* 返回案卷目录 */
    goBack() {
      this.$router.push({
        path: "/project/template-item/filing/Photoarchives",
        query: {},
      });
    },

    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    /* 判断查看上一个还是下一个 */
    async GoLeft(num) {},

    // 控制input显示 row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      var that = this;
      switch (column.label) {
        case "照片号":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "拍摄时间":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "题名":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "页号":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "备注":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        default:
          return;
      }
    },
    /* 点击表格 */
    Rowclick(row) {
      console.log(row);
      this.editForm = row;
    },
    // 把每一行的索引放进row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },

    // 把每一列的索引放进column
    tableCellClassName({ column, columnIndex }) {
      column.index = columnIndex;
    },

    // 表格失去焦点初始化
    async inputBlur() {
      console.log(this.editForm, "121");
      let res = await AddphotoCatalogs(this.editForm);
      console.log(res);
      if (res.data.code == 200) {
        this.$message({
          message: res.data.msg,
          showClose: true,
          duration: 3000,
          type: "success",
        });
        this.loadData(this.iDS);
      } else {
        this.$message({
          message: res.data.msg,
          showClose: true,
          duration: 3000,
          type: "error",
        });
      }
    },
    async loadData(num) {
      let res = await photoCatalogs(num);
      console.log(res);
      this.tableData = res.data.data.data;
      this.now_location = res.data.data.data.now_location;
    },
    /* 新增照片档案 */
    async addClick() {
      this.addForm.photo_archives_id = this.$route.query.id;
      console.log(this.addForm);
      let res = await AddphotoCatalogs(this.addForm);
      console.log(res);
      if (res.data.code == 200) {
        this.$message({
          message: res.data.msg,
          showClose: true,
          duration: 3000,
          type: "success",
        });
        this.loadData(this.iDS);
      } else {
        this.$message({
          message: res.data.msg,
          showClose: true,
          duration: 3000,
          type: "error",
        });
      }
    },
    //问题标记
    ProblemMark() {
      if (this.multipleSelection == null) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "请先选中要标记的问题",
          type: "error",
        });
      } else {
        this.dialogVisible = true;
      }
    },
    /* 问题已解决 */
    Problemsolving(row) {
      /*  this.$confirm("问题已解决？")
        .then(async (_) => {
          let id = row.id;
          let part_company_id = this.$route.query.companyId;
          let res = await bCatalogsproblemresolve({ id, part_company_id });
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.loadData2(this.iDS);
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((_) => {
          console.log(2);
        }); */
    },
    /* 多选输入框返回输入建议的方法 */
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    /* 输入建议框提供的建议 */
    loadAll() {
      return [
        { id: "1", value: "照片题名重复" },
        { id: "2", value: "页号错误" },
        { id: "3", value: "日期错误" },
        { id: "4", value: "底图错误" },
        { id: "5", value: "照片号错误" },
      ];
    },
    /* 输入建议框选中的值 */
    handleSelect(item) {
      console.log(item);
    },
  },
  created() {
    this.loadData(this.iDS);
    this.restaurants = this.loadAll();
  },
};
</script>

<style scoped lang="less">
@import "../../../../../assets/css/tree.less";
.top {
  margin: 0px 0;
}

/deep/.el-table__header {
  margin-bottom: 20px;
  line-height: 40px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.table .el-button--mini {
  font-size: 18px !important;
  padding: 7px 5px;
  margin: 0 5px;
}
/deep/.el-dialog__header {
  padding: 20px 20px 16px;
}
.top {
  display: flex;
  justify-content: space-between;
  /* .el-button {
    padding: 5px 5px;
  }*/
  .top-left {
    display: flex;
    flex-wrap: wrap;
    .el-button {
      padding: 3px 3px;
      height: 30px;
    }
  }
}
.top-right {
  flex: 1;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    margin: 6px 0;
    /deep/.el-form-item {
      margin-bottom: 0px;
    }
  }
  /deep/.el-input__inner {
    height: 30px;
    line-height: 30px;
    padding: 0 9px;
  }
  .el-input {
    width: 88%;
  }
  .el-select {
    width: 60%;
  }
  /deep/.el-form-item__content {
    margin-left: 110px !important;
  }
}
/* /deep/.el-table .el-table__cell {
  text-align: center;
} */
/deep/.el-table .el-table__cell {
  padding: 2px 0px;
}
/deep/.el-table .cell {
  padding-left: 5px;
  padding-right: 5px;
}
/deep/.el-textarea__inner {
  height: 47px;
}
.el-textarea {
  width: 350px;
  font-size: 12px;
}
.TextArea {
  /deep/.el-form-item__content {
    margin-left: 110px !important;
  }
}
.TextAreas {
  .el-textarea {
    width: 540px;
    font-size: 12px;
  }
  /deep/.el-form-item__content {
    margin-left: 110px !important;
  }
}
.table {
  /deep/.el-input__inner {
    padding: 0 5px;
  }
}
/deep/.el-radio-button__inner {
  padding: 7px 7px;
}
.IPBT {
  .el-input {
    width: 72%;
  }
}
.Btn {
  padding: 10px 15px;
  border-radius: 5%;
  border: 1px solid #ccc;
  cursor: pointer;
}
.InputTit {
  width: 620px;
}
.InputTits {
  width: 250px;
}
/deep/.el-input--mini .el-input__inner {
  height: 40px;
}
/deep/.el-input__suffix {
  right: 10px;
}
.login-btn {
  display: flex;
  justify-content: space-around;
}
.Sync {
  display: flex;
  .leftSync {
    width: 20%;
  }
  .rightSync {
    width: 80%;
    display: flex;
    i {
      font-size: 60px;
      margin: auto;
    }
  }
}
/* .custom-tree-node .nodeLabel {
  color: #666;
} */
.top-right .classBack {
  padding: 8px 40px;
}
/* .custom-tree .el-tree-node__content {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
} */
.span-ellipsis {
  width: calc(100% - 4px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: auto;
  padding: 4px 2px;
  border-radius: 4px;
}
.el-table td.el-table__cell div {
  width: 100%;
}

/deep/.el-textarea.is-disabled .el-textarea__inner {
  color: #5b5454;
}
/deep/.el-input.is-disabled .el-input__inner {
  color: #5b5454;
}
/deep/.el-textarea__inner {
  padding: 2px 2px;
  font-size: 14px;
}
.inline-input {
  width: 85%;
}
.commontop .el-input {
  width: 19%;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>